import VueRouter from "vue-router";
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Messages from '../pages/Messages.vue'
import Detail from '../pages/Detail.vue'

export default new VueRouter({
    routes: [
        {
            path: "/about",
            name: "About",
            component: About
        },
        {
            path: "/home",
            name: "Home",
            component: Home,
            children: [
                {
                    path: "news",
                    name: "News",
                    component: News,
                    children: [
                        {
                            path: "detail",
                            name: "NewsDetail",
                            // name: "Detail",
                            component: Detail,
                            props: ({ query }) => ({ id: query.id, msg: query.msg })

                        }
                    ]
                },
                {
                    path: "messages",
                    name: "Messages",
                    component: Messages,
                    children: [
                        {
                            path: "detail/:id/:msg",  // 声名params参数
                            // path: "detail",
                            name: "Detail", // 如果存在同名路由名称，则会按照路由的先后顺序进行匹配
                            component: Detail,

                            // props 第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
                            // props: { a: 1, b: 2 },

                            // props 第二种写法，值为布尔值，若布尔值为真，就会把路由组件收到的所有params参数以props的形式传给Detail组件
                            // props: true,

                            // props 第三种写法，值为函数，该函数返回的对象中每一对key-value都会以props的形式传给Detail组件
                            // 接收 route 对象
                            props: ({ params }) => ({ id: params.id, msg: params.msg })
                            // props: ({ query }) => ({ id: query.id, msg: query.msg })
                        }
                    ]
                }
            ]
        }
    ]
})